<template>
  <BackHeader :title="lang.page_title" />
  <div class="app_center activity-page">
    <Tab :activeTab="activeTab" :tabs="tabs" @change="changeTab" />
    <GrandPrize :activeTab="activeTab" />
    <Lottery :activeTab="activeTab" />
    <WinningRecord />
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Tab from "./components/Tab.vue";
import GrandPrize from "./components/GrandPrize.vue";
import Lottery from "./components/Lottery.vue";
import WinningRecord from "./components/WinningRecord.vue";
import Footer from "./components/Footer.vue";

const lang: any = getCurrentPageLang("activity/slot");

interface TabItem {
  id: number;
  title: string;
  badge: string;
}
const tabs: TabItem[] = [
  { id: 1, title: lang.tab_normal_title, badge: lang.tab_normal_badge },
  { id: 2, title: lang.tab_brabo_title, badge: lang.tab_brabo_badge },
];
const activeTab = ref(tabs[0]);
function changeTab(item: TabItem) {
  activeTab.value = item;
}
</script>

<style scoped lang="scss"></style>
